<template>
    <div>
        <!-- 图表分段器 -->
        <div class="analysis-chart-segmented">
            <el-segmented v-model="segmentedValue" :options="segmentedOptions">
                <template #default="{ item }: { item: any }">
                    <div class="flex flex-col items-center gap-2 pl-4 pr-4">
                        <el-icon size="20">
                            <CharIcon v-model:iconName="item.icon"></CharIcon>
                        </el-icon>
                    </div>
                </template>
            </el-segmented>
        </div>
        <!-- 图标展示 -->
        <keep-alive>
            <div class="analysis-chart-show">
                <QuickChart v-model:productList="productList" v-model:customerList="customerList"></QuickChart>
            </div>
        </keep-alive>
    </div>
</template>

<script setup lang="ts">
import { getAllCustomerList } from '@/api/customer';
import { getAllProductList } from '@/api/product';
import CharIcon from './components/CharIcon.vue';
import QuickChart from './components/QuickChart.vue';
import { useSystemStore } from '@/store/modules/system';

onMounted(() => {
    getAllCustomerList().then((res) => {
        res.data.forEach((item) => {
            if(item.customerAvailable) {
                item.value = item.customerName;
                customerList.push(item);
            }
        });
    });
    getAllProductList().then((res) => {
        res.data.forEach((item) => {
            item.products.forEach((i: any) => {
                i.customerId = item.customerId;
                i.value = i.productName;
                productList.push(i);
            });
        });
    });
});

/* ******************************通用属性/方法****************************** */
const useSystem = useSystemStore();
// 表格显示宽度
const analysisChartShowWidth = computed(() => {
    return useSystem.config.isCollapse ? 'calc(100vw - 84px)' : 'calc(100vw - 220px)';
});
// 客户列表
const customerList = reactive<AjaxResponse['customerList']>([]);
// 产品列表
const productList = reactive<(AjaxResponse['productList'][number] & { value: string; customerId: string })[]>([]);

/* ******************************分段器属性/方法****************************** */
const segmentedValue = ref('quickChart');
const segmentedOptions = [
    {
        label: '客户发货分析',
        value: 'quickChart',
        icon: 'quickChart',
    },
    // {
    //     label: '产品汇集分析',
    //     value: 'xy',
    //     icon: 'xy',
    // },
    // {
    //     label: '客户产品分析',
    //     value: 'verticalBar',
    //     icon: 'verticalBar',
    // },
];
</script>

<style lang="scss" scoped>
.analysis-chart-segmented {
    height: 30px;
}

.analysis-chart-show {
    height: calc(100vh - 110px);
    width: v-bind(analysisChartShowWidth)
}
</style>
